<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue检测数据改变-总结</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 
        Vue监视数据的原理：
            1、vue会监视data中所有层级的数据。

            2、如何检测对象中的数据？
                通过setter实现监视，且要在new.Vuej时就传入要监视的数据。
                    （1）、对象中追加的属性，Vue默认不做响应式处理。
                    （2）、如需给后添加的属性做响应式，请使用如下API：
                        Vue.set(target,propertyName/index,value);
                        vm.$set(target,propertyName/index,value);

            3、如何检测数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事：
                    （1）、调用原生对应的方法对数组进行更新；
                    （2）、重新解析模板，进而更新页面。

            4、在Vue修改数组中的某一个元素一定要用如下方法：
                （1）、使用这些API：push(),shift(),unshift(),splice(),sort(),reverse(),改变原数组
                   注意：filter()、concat()、slice()他们不会更改原数组，但是会return返回一个新数组，将新数组赋值给数据，做渲染
                （2）、Vue.set()或 vm.$set()

            特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据添加属性！！！
     -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <h2>我校地址：{{address}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click="student.age++">年龄加1岁</button>
        <button @click="addSex">加性别</button>
        <button @click="student.sex='未知'">修改性别</button>
        <button @click.once="addFriend">首位加朋友</button>
        <button v-if="student.friends[0].name === '娃哈哈'" @click="fristFriendName">修改第一位朋友名字：张三</button>
        <button @click.once="addHobby">添加一个爱好</button>
        <button @click="filterHobby">爱好只有学习</button>
        <button @click="setHobby">修改第一个爱好：开车</button><br><br>


        <h2>学生姓名：{{student.name}}</h2>
        <h2>学生年龄：{{student.age}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>宠物狗：{{student.dog.name}},{{student.dog.age}}岁</h2>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>
        </ul>


    </div>
    <script>
        // let arr=['抽烟','喝酒','烫头']
        Vue.config.productionTip=false;
        const vm = new Vue({ 
            el: '#root',
            data: {
                name:'黑马程序员',
                address:'杭州下沙校区',
                student:{
                    name:'Tom',
                    age:'18',
                    dog:{
                        name:'xixi',
                        age:'4',
                    },
                    // hobby:arr,
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'Cun',age:'18'},
                        {name:'Xia',age:'16'},
                        {name:'Qiu',age:'20'},
                        {name:'Dong',age:'19'},
                    ],
                },
            },
            methods: {
                addSex(){
                    // this.$set(this.student,'sex','男')
                    Vue.set(this.student,'sex',"男")//只能根（vm.data）里的某个对象加
                },
                addFriend(){
                    this.student.friends.unshift({name:'娃哈哈',age:'20'})
                },
                fristFriendName(){
                    this.student.friends[0].name = '张三'
                },
                addHobby(){
                    this.student.hobby.push('学习')
                },
                setHobby(){
                    // this.student.hobby.splice(0,1,'开车')
                    // this.$set(this.student.hobby,0,'开车')
                    Vue.set(this.student.hobby,0,'开车')
                },
                filterHobby(){
                    this.student.hobby=this.student.hobby.filter(
                        (h)=>h==='学习'
                    )
                }
            },
            
        })
    </script>
</body>
</html>